<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Models</title>
</head>
<body>
	<script type="text/javascript">

		window.onload = function addCells() {
			//请求参数
			var list = {};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/models",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						modelId = result[i].id;
						modelName = result[i].model_name;
						modelSystem = result[i].system_name;
						var table = document.getElementById("dataTable");
						var row = table.insertRow(1);
						var idCell = row.insertCell(0);
						var nameCell = row.insertCell(1);
						var systemCell = row.insertCell(2);
						var operateCell = row.insertCell(3);
						idCell.innerHTML = modelId;
						nameCell.innerHTML = modelName;
						systemCell.innerHTML = modelSystem;
						operateCell.innerHTML = "<input id=\"cell" + modelId + "\" type=\"submit\" value=\"Delete\" onclick=\"deleteModel(this)\"/>";
						
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	
		function addModel(){
			window.location="http://127.0.0.1:8888/uitest/modelsPage/add";
		}

		function deleteModel(btn) {
			//得到html
			console.log(btn)
			//得到对象
			console.log($(btn))
			//得到自定义的custom
			console.log("delete:" + $(btn).attr("id"))
			//请求参数
			var list = {
				"cell":$(btn).attr("id")
			};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/models/delete",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					location.reload();
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	</script>
<div>
	<div id="headerMenu" style="width: 80%; margin-left: 15%; margin-top: 30px">
		<table id="headerMenuTable" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">modelsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">pagesPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">elementsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">scenariosPage</th>
  			</tr>
		</table>
	</div>
	<div>
	    <div id="headerView" style="width: 80%; margin-left: 15%; margin-top: 30px">
	        Model Name:
	        <input type="text" name="modelName" placeholder="OMS/WMS/PMS……" />
	    </div>
	    <div id="addBtn" style="float: right; margin-right: 15%">
	    	<button onclick="addModel()">Add</button>
	    </div>
	</div>
	<div id="tableView" style="text-align:center;margin-top: 50px; margin-left: 15%">
		<table id="dataTable" width="70%" border="1" cellspacing="0" cellpadding="0">
			<tr>
    			<th width="20%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ID</th>
    			<th width="30%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ModelName</th>
    			<th width="30%" height="35" align="center" bgcolor="rgba(238,238,238,1)">System</th>
    			<th width="20%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Operator</th>
  			</tr>
		</table>
	</div>

</div>
</body>
</html>